<template>
  <div class="list-wrap">
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="12" :xl="10" :xxl="7">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" v-model="params.search_type">
                <a-select-option :value="0">全部</a-select-option>
                <a-select-option :value="1">服务商id</a-select-option>
                <a-select-option :value="2">服务商账号</a-select-option>
                <a-select-option :value="3">服务商姓名</a-select-option>
                <a-select-option :value="4">服务商手机号</a-select-option>
                <!-- 1 id 2 编号 3 姓名 4 手机号 0 全部 -->
              </a-select>
              <a-input style="width: 60%" placeholder="请输入查询条件" v-model="params.name" />
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="10" :xxl="7">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" v-model="params.pid_type">
                <a-select-option :value="0">全部</a-select-option>
                <a-select-option :value="1">推荐人姓名</a-select-option>
                <a-select-option :value="2">推荐人手机号</a-select-option>
                <!-- 推荐人搜索类型 0 全部 1 姓名  2 手机号 -->
              </a-select>
              <a-input style="width: 60%" placeholder="请输入推荐人查询条件" v-model="params.pid_name" />
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="10" :xxl="8">
          <a-form-item label="创建时间">
            <date :value="time" @change="dateChange" />
          </a-form-item>
        </a-col>
        <a-col :lg="14" :xl="10" :xxl="7">
          <a-form-item label="所属区域">
            <area-select :createPlace="area" @handlePlace="selectArea" />
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="6" :xxl="4">
          <div class="top-btns">
            <a-button @click="searchList" type="primary">查询</a-button>
            <a-button @click="resetList">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :dataSource="inviteData"
        rowKey="index"
        :loading="loading"
        :pagination="pagination"
        :scroll="scrollX"
      >
        <span slot="action" slot-scope="text, item" class="action-wrap">
          <a @click="() => viewDetail(item)">查看详情</a>
          <a @click="()=> confirmHint(item, 'del')">删除</a>
        </span>
      </a-table>
      <pagination :total="total" @loadDataList="pageInit" ref="pageBand" />
      <!-- <a @click="$router.push('/menu/provider/draftsList/detail')">查看详情</a> -->
    </div>
    <div class="modal-wrap">
      <!-- 删除确认框 -->
      <confirm-modal :hint="hint" @handleConfirm="deleteList" ref="openModal" />
    </div>
  </div>
</template>

<script>
import { ptInviteDraftSearch, ptInviteDraftDelete } from "../../store/providerApi.js"
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      hint: '',
      params: {
        province_id: 0,
        city_id: 0,
        district_id: 0,
        start_time: 0,
        end_time: 0,
        search_type: 0,
        name: "",
        pid_type: 0, // 0 全部 1 姓名  2 手机号
        pid_name: ""
      },
      time: [], //创建时间
      total: 0,
      pagination: false, // 表格自带的分页器
      loading: false,
      scrollX: {},
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      columns: [
        {
          dataIndex: "index",
          title: "序号",
          fixed: "left",
          width: 60
        },
        {
          dataIndex: "partner_id",
          title: "服务商id"
        },
        {
          dataIndex: "partner_no",
          title: "服务商账号"
        },
        {
          dataIndex: "partner_name",
          title: "服务商姓名"
        },
        {
          dataIndex: "phone",
          title: "服务商手机号"
        },
        {
          dataIndex: "participation",
          title: "加盟费(元)"
        },
        {
          dataIndex: "province_name",
          title: "省份"
        },
        {
          dataIndex: "city_name",
          title: "城市"
        },
        {
          dataIndex: "district_name",
          title: "区/县"
        },
        {
          dataIndex: "created_at",
          title: "创建时间"
        },
        {
          dataIndex: "parent_partner_name",
          title: "推荐人姓名"
        },
        {
          dataIndex: "parent_partner_phone",
          title: "推荐人手机号"
        },
        {
          title: "操作",
          fixed: "right",
          width: 150,
          scopedSlots: { customRender: "action" }
        }
      ],
      inviteData: [],
      area: []
    }
  },
  methods: {
    pageInit(info) {
      this.loading = true
      ptInviteDraftSearch({
        ...this.params,
        page: info.page,
        num: info.pageSize
      }).then(res => {
        this.loading = false
        var array = res.data.list
        for (let i = 0; i < array.length; i++) {
          array[i]["index"] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.inviteData = array
        this.total = res.data.total_num
        if (res.data.list.length > 0) {
          this.scrollX = { x: 2000 }
        } else {
          this.scrollX = {}
        }
      })
    },
    // 查询列表
    searchList() {
      this.$refs.pageBand.getData()
    },
    // 重置列表
    resetList() {
      this.params = {
        province_id: 0,
        city_id: 0,
        district_id: 0,
        start_time: 0,
        end_time: 0,
        search_type: 0,
        name: "",
        pid_type: 0, // 0 全部 1 姓名  2 手机号
        pid_name: ""
      }
      this.area = []
      this.time = []
      this.$refs.pageBand.getData()
    },
    // 所属区域
    selectArea({ area, provinceId, cityId, districtId }) {
      this.area = area
      this.params.province_id = provinceId
      this.params.city_id = cityId
      this.params.district_id = districtId
    },
    // 查询时间
    dateChange({ date, start_time, end_time }) {
      this.time = date
      this.params.start_time = start_time
      this.params.end_time = end_time
    },
    viewDetail(item) {
      this.itemMsg = item
      this.$router.push({
        path: '/menu/provider/draftsList/detail',
        query: { id: this.itemMsg.uuid }
      })
    },
    // 删除时的确认框
    confirmHint(item, type) {
      if (type === "del") {
        this.hint = 6
      }
      this.itemMsg = item
      this.$refs.openModal.openModal()
    },
    deleteList(item) {
      ptInviteDraftDelete({
        id: this.itemMsg.uuid
      }).then(res => {
        this.$message.success(res.data.message)
        this.$refs.pageBand.getEvent()
      })
    },
  }
}
</script>

<style>
</style>
